﻿@page "/layouts"

<h3>Layout 布局</h3>

<h4>用于布局的容器组件，方便快速搭建页面的基本结构：</h4>

<p>
    <code>Container</code>：外层容器。当子元素中包含 <code>Header</code> 或 <code>Footer</code> 时，全部子元素会垂直上下排列，否则会水平左右排列。<br />
    <code>Header</code>：顶栏容器<br />
    <code>Side</code>：侧边栏容器<br />
    <code>Main</code>：主要区域容器<br />
    <code>Footer</code>：底栏容器
</p>

<h4>组件概述</h4>
<p>
    <code>Layout</code>：布局容器，其下可嵌套 <code>Header</code> <code>Sider</code> <code>Main</code> <code>Footer</code> 或 <code>Layout</code> 本身，可以放在任何父容器中<br />
    <code>Header</code>：顶部布局，自带默认样式，其下可嵌套任何元素<br />
    <code>Sider</code>：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素<br />
    <code>Main</code>：内容部分，自带默认样式，其下可嵌套任何元素<br />
    <code>Footer</code>：底部布局，自带默认样式，其下可嵌套任何元素
</p>

<Alert ShowBar="true" Color="Color.Info">
    <p>
        以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<code>Layout</code> 的子元素只能是后四者，后四者的父元素也只能是 <code>Layout</code>
    </p>
</Alert>

<h4>常见页面布局</h4>

<Block Title="上中下布局" Introduction="常见于互联网网站布局" CodeFile="layout.1.txt">
    <Layout>
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="中部左右结构布局" Introduction="中部采用左右结构，多用于后台管理网站布局，当布局模板中增加 <code>Side</code> 组件时默认采用上中下，中部采用左右结构布局" CodeFile="layout.2.txt">
    <Layout>
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="左右结构" Introduction="右侧采用上中下结构，多用于后台管理网站布局，通过设置 <code>IsFullSide</code> 属性值来控制布局为左右结构" CodeFile="layout.3.txt">
    <Layout IsFullSide="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<AttributeTable Items="@GetAttributes()" />
